<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <title>contact me</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/Detector.js"></script>
    <style type="text/css">
        body {
            background-image: url("images/cloud.jpg");
            background-size: cover;
            margin: 0;
            overflow: hidden;
            font-size:13px;
            text-align:center;
            font-weight: bold;
        }
       #body{
           position: absolute;
           left: 0;
           width: 100%;
       }
       #container{
           position: relative;
           top: 200px;
           opacity:1;
           margin: 0 auto;
           -webkit-animation: flash-in 4s;
           animation: flash-in 4s;
       }
        @keyframes flash-in {
            from{
                top: 0;
                opacity:0;
            }
            to{
                top: 200px;
                opacity:1;
            }
        }
    </style>
</head>
<body>
<div id="body">
    <div id="container">
    <h1>Glad to receive your message</h1>
    <p>我的邮箱:joinlin-wy@qq.com</p>
    <p>
        <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=NV9aXFtZXFsYQkx1REQbVlpY">
            <img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_22.png"/></a>
    </p>
    <p><em>感谢您的关注！</em></p>
    </div>
</div>
<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv;
			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}

</script>
<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map;
			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;
			varying vec2 vUv;
			void main() {
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );
				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
			}

</script>
<script type="text/javascript">
  if (!Detector.webgl) Detector.addGetWebGLMessage();
  var container;
  var camera, scene, renderer;
  var mesh, geometry, material;
  var mouseX = 0, mouseY = 0;
  var start_time = Date.now();
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  init();
  function init() {
    container = document.createElement("div");
    container.setAttribute("id","BG");
    document.body.appendChild(container);
    // Bg gradient
    var canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = window.innerHeight;
    var context = canvas.getContext('2d');
    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, "#1e4877");
    gradient.addColorStop(0.5, "#4584b4");
    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);
    container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
    container.style.backgroundSize = '32px 100%';
    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
    camera.position.z = 6000;
    scene = new THREE.Scene();
    geometry = new THREE.Geometry();
    var texture = THREE.ImageUtils.loadTexture('images/cloud.png', null, animate);
    texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    var fog = new THREE.Fog(0x4584b4, -100, 3000);
    material = new THREE.ShaderMaterial({
      uniforms: {
        "map": {type: "t", value: texture},
        "fogColor": {type: "c", value: fog.color},
        "fogNear": {type: "f", value: fog.near},
        "fogFar": {type: "f", value: fog.far},
      },
      vertexShader: document.getElementById('vs').textContent,
      fragmentShader: document.getElementById('fs').textContent,
      depthWrite: false,
      depthTest: false,
      transparent: true
    });
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
    for (var i = 0; i < 8000; i++) {
      plane.position.x = Math.random() * 1000 - 500;
      plane.position.y = -Math.random() * Math.random() * 200 - 15;
      plane.position.z = i;
      plane.rotation.z = Math.random() * Math.PI;
      plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
      THREE.GeometryUtils.merge(geometry, plane);
    }
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = -8000;
    scene.add(mesh);
    renderer = new THREE.WebGLRenderer({antialias: false});
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);
  }
  function onDocumentMouseMove(event) {
    mouseX = ( event.clientX - windowHalfX ) * 0.25;
    mouseY = ( event.clientY - windowHalfY ) * 0.15;
  }
  function onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  function animate() {
    requestAnimationFrame(animate);
    position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;
    camera.position.x += ( mouseX - camera.position.x ) * 0.01;
    camera.position.y += ( -mouseY - camera.position.y ) * 0.01;
    camera.position.z = -position + 8000;
    renderer.render(scene, camera);
  }
</script>
</body>
</html>
